feat: useWatch support dynamic names #758
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
""" Walkthrough本次变更主要重构了 Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Form
participant useWatch
User->>Form: 填写表单
Form->>useWatch: 注册 selector 监听
useWatch->>Form: 订阅值变更
Form-->>useWatch: 通知值变更
useWatch->>User: 触发回调，返回 selector 选中的值
User->>Form: 切换 selector 字段
Form-->>useWatch: 重新触发监听
useWatch->>User: 返回新字段值
Assessment against linked issues
Assessment against linked issues: Out-of-scope changes（未发现超出关联 issue 目标的功能性代码变更。） Suggested reviewers
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
src/useWatch.tsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct. The config "prettier" was referenced from the config file in "/.eslintrc.js". If you still have problems, please stop by https://eslint.org/chat/help to chat with the team. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
✨ Finishing Touches
🧪 Generate Unit Tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
| triggerUpdate(); | ||
|
|
||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [isValidForm, flattenDeps]); |
There was a problem hiding this comment.
我想的是，如果 dependencies 是方法，那判断返回的值，stringify处理，如果改变了就 render
There was a problem hiding this comment.
我想的是，如果 dependencies 是方法，那判断返回的值，stringify处理，如果改变了就 render
就是这么做的。
There was a problem hiding this comment.
现在是只要 render 了，flattenDeps 就变了
There was a problem hiding this comment.
哦，只是 triggerUpdate 执行了，但是 setValue 还是判断变没变
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
docs/examples/debug.tsx (1)
9-10: 建议移除注释的代码行注释的代码行展示了旧的 API 用法，但在示例中保留它可能会造成混淆。建议完全移除以保持代码简洁。
- // const val = Form.useWatch(keyName ? 'name' : 'age', form); const val = Form.useWatch(values => values[keyName ? 'name' : 'age'], form);tests/useWatch.test.tsx (1)
429-460: 测试逻辑正确且验证了动态监听功能测试成功验证了动态字段监听的功能，从检查警告改为验证实际行为是正确的方向。测试逻辑清晰地验证了从监听 'light' 字段切换到 'bamboo' 字段时值的正确更新。
小建议：可以考虑添加更多边界情况的测试，比如切换到不存在的字段名。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
docs/examples/debug.tsx(1 hunks)src/useWatch.ts(2 hunks)tests/useWatch.test.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
src/useWatch.ts (2)
src/FieldContext.ts (1)
HOOK_MARK(5-5)src/utils/valueUtil.ts (3)
getValue(6-6)getNamePath(15-17)setValue(6-6)
docs/examples/debug.tsx (1)
tests/common/InfoField.tsx (1)
Input(9-11)
🪛 GitHub Actions: ✅ test
src/useWatch.ts
[error] 7-7: ESLint: 'InternalNamePath' is defined but never used. (@typescript-eslint/no-unused-vars)
[error] 10-10: ESLint: 'WatchCallBack' is defined but never used. (@typescript-eslint/no-unused-vars)
🔇 Additional comments (6)
docs/examples/debug.tsx (2)
14-27: 很好的动态监听示例实现这个简化的示例很好地展示了新的动态监听功能。使用选择器函数而不是静态字段名是一个很好的演示，清楚地展示了 API 的新功能。
3-3: 路径已验证：相对导入路径正确已确认
docs/examples/components/Input.tsx文件存在，import Input from './components/Input'路径无误。示例代码简化清晰，完美展示了新 API 的动态监听功能，批准合并。src/useWatch.ts (4)
120-133: triggerUpdate 函数实现正确使用
useEvent包装triggerUpdate函数是一个很好的设计选择，确保了函数引用的稳定性。函数正确处理了选择器函数和路径字符串两种情况，并且通过序列化比较避免了不必要的更新。
136-149: 依赖变化的 useEffect 实现良好
flattenDeps的序列化处理很聪明，能够正确跟踪函数和路径的变化。立即触发更新确保了依赖变化时的及时响应。
152-165: 值变化监听的 useEffect 设计合理将监听器注册分离到单独的 useEffect 中是好的关注点分离。正确地返回了取消注册函数进行清理。
90-167: 验证选择器函数的性能影响新的选择器函数功能很强大，但需要确认在频繁更新时的性能表现，特别是当选择器函数比较复杂时。
建议在实际应用中测试复杂选择器函数的性能，或者考虑添加缓存机制来优化频繁调用的场景。
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #758 +/- ##
==========================================
+ Coverage 99.45% 99.53% +0.07%
==========================================
Files 19 19
Lines 1296 1287 -9
Branches 319 319
==========================================
- Hits 1289 1281 -8
+ Misses 7 6 -1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
fix ant-design/ant-design#54173
close #756
Summary by CodeRabbit
文档
重构
测试